<template>
  <div class="liveView">
    <!-- src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584180320131&di=00b392308068eb6ef715fd9f308f32f0&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170313%2Fca79a0faba504cb4a869dc3b700ebd9a.jpeg" alt=""> -->
<!-- 
    <img 
      v-if="imgShow"
      style="position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index:9;width:100%;height:100%" 
      src="@/assets/bg.jpg"
      alt=""
    >
    <div
      v-if="imgShow"
      style="position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index:9;width:7.5rem;height:9.375rem;text-align:center;" 
    >
      直播待开始...
    </div> -->
   <!-- allowsInlineMediaPlayback=YES  
    webview.allowsInlineMediaPlayback=YES 
    preload="auto" 
     width='100%' 
    :poster="posterSrc" 
    webview.mediaPlaybackRequiresUserAction=NO  -->

  <!-- <div v-show='!isError'> vjs-16-9 vjs-default-skin-->
   <video 
    id="videobox" 
    class="video-js  vjs-big-play-centered " 
    webkit-playsinline="true" 
    playsinline="true" 
    x5-video-player-type="h5-page" 
    x5-video-player-fullscreen="true"
    ref='videoRef' 
    tabindex="-1"
    >
      <p class="vjs-no-js">不支持播放</p>
   </video>
  <!-- </div> -->
  <!-- <div v-show='isError' class="errorTip"><p>视频出错了！</p></div> -->

    <!-- 标题 -->
    <div class="goods-self">
      <div class="v-title">
        <div>{{title}}</div>
        <!-- <div><van-icon name="cross" color="#1989fa"/></div> -->
      </div>
    </div>

    <!-- 播放按钮 -->
    <div v-if="startImg" style="position:fixed;width:4.5rem;height:4.5rem;bottom:0;right:0;left:0;top:0;margin:auto;z-index:9">
      <img @click="tt" v-show='!isError' style="width:4.5rem;height:4.5rem;" src="@/assets/start.png" alt=""/>
    </div>

    <!-- 购物车 -->
    <div style="position:fixed;width:100px;bottom:5.25rem;right:.8rem;z-index:9">
      <div class="footer_btn" @click="mShow">
        <img style="width:1.8rem;height:1.8rem;" src="@/assets/car.png" alt="" class="animate-bounce-down" />
      </div> 
    </div>

    <!-- 非法访问 -->
    <div style="text-align:center;line-height:10vh; background:#fff;color:red;position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;height:10vh;z-index:33333;width:60%;" v-if="layShow">
      非法访问
    </div>
    <van-popup
      v-model="show"
      round
      :lock-scroll="true"
      position="bottom"
      :style= "{ height:'50%' }"
    >
      <div style="padding:.3125rem;position:relative;" v-for="item in goodsList" :key="item.id">
        <div class="v-content m-list" >
          <div class="left">
            <img :src="item.image" alt="">
          </div>
          <div class="m-right">
            <div>{{item.name}}</div>
            <div class="price">
              <span>￥{{item.member_price}}</span>
              <!-- <span class="conpon">￥400</span> -->
            </div>
            <div class="buy">
              <van-button size="small" type="info" @click="buy(item.id)">立即购买</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>

    

    <!-- <Switcher></Switcher> -->
  <!-- </div> -->
</template>

<script>
import $axios from 'axios'
import videojs from 'video.js'
import { Toast,Dialog } from 'vant';

// import Switcher from '@/components/Switcher'
export default {
  name: 'live',
  components: {
    // Switcher
  },
  data() {
    return {
      videoSrc:'',
    	posterSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584180320131&di=00b392308068eb6ef715fd9f308f32f0&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170313%2Fca79a0faba504cb4a869dc3b700ebd9a.jpeg',
      isError:false,
      player: null,
      layShow: false,
      startImg: true,
      res_room_id: '',
      res_gropenid: '',
      // 错误图标提示
      imgShow: false,
      title: '',
      show: false,
      goodsList: [],
      initialized: false,
      currentTech: '',
      streams: {
        rtmp: '',
        hls: ''
      },
      playerOptions: {
        overNative: true,
        // 自动播放
        autoplay: true,
        muted: true,
        // 是否显示控制栏
        controls: true,
        // 兼容顺序
        techOrder: ['html5'],
        isFullscreen: false,
        sourceOrder: true,
        fluid: true,
        language: 'zh-CN',
        //可以使用m3u8视频
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            withCredentials: false,
            type: 'application/x-mpegURL',
            src: 'http://bo.huic.cloud/live/1400307877_ch123.m3u8'
          }
        ],
        width: '100%',
        // poster: '/static/images/logo.png',
        notSupportedMessage: '视频无法播放，请稍后再试'
        // controlBar: {
        //   timeDivider: false, // 时间分割线
        //   durationDisplay: false, // 总时间
        //   progressControl: true, // 进度条
        //   customControlSpacer: true, // 未知
        //   fullscreenToggle: true // 全屏
        // },
      }
    }
  },
  computed: {
    
    // player() {
    //   return this.$refs.videoPlayer.player
    // },
  },
  created() {
    // this.videoSrc = 'http://bo.huic.cloud/live/1400307877_'+ this.$route.query.room_id +'.m3u8' 
    // console.log('bbbbbbb', this.videoSrc)
    
  },
  mounted() {
    var _this = this;
    if(this.$route.query.dlopenid && this.$route.query.gropenid && this.$route.query.room_id) {
      localStorage.setItem('dlopenid', this.$route.query.dlopenid)
      localStorage.setItem('gropenid', this.$route.query.gropenid)
      // localStorage.setItem('room_id', this.$route.query.room_id)
      // this.$router.replace({name:'life', params:{room_id: this.$route.query.room_id}})
      this.$router.push({ path: '/', query: { room_id: this.$route.query.room_id }});
    }
    this.getTitle()
    // this.getGoodsList()
    // console.log(this.playerOptions)
  },
  beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
  },
  methods: {
    tt() {
      console.log('tttttt')
      this.startImg = false;
      this.player.play()
    },
    mShow() {
      this.show = true
    },
    loading(room_id) {
      let _this = this
      let videoSrc = 'http://bo.huic.cloud/live/1400307877_'+ room_id +'.m3u8' 
    // this.videoSrc = 'http://bo.huic.cloud/live/1400307877_'+ this.$route.query.room_id +'.m3u8' 
    // this.$refs.videoRef.src = videoSrc;
    console.log('ccccccccccccccccccccc', videoSrc)
    //为避免在初始化video时播放源是空的，报播放源错误，需要先给source 的src赋值
    this.player = videojs('videobox',{
                suppressNotSupportedError: false,
                sources: [{
                  type: 'application/x-mpegURL',
                  src: videoSrc
                }],
                // autoplay:true,
                // bigPlayButton: true,
                // textTrackDisplay: true,
                // posterImage: true,
                // errorDisplay: false,
                // controlBar: false,
                // playbackRates: [0.5, 1, 1.5, 2],
                // ControlBar:{
                //     customControlSpacer: true
                // }
                  controlBar: {
                    fullscreenToggle: false, //显示全屏按钮，默认为true
                    pictureInPictureToggle: false, //隐藏画中画按钮，默认为true
                    volumePanel: false, //隐藏声音面板
                    currentTimeDisplay: true, //显示当前播放时间
                    timeDivider: false, //显示时间分割线
                    durationDisplay: false, //显示总时间
                    remainingTimeDisplay: false, //隐藏剩余时间，
                    playbackRateMenuButton: false,
                },
            },
            function onPlayerReady(){
              console.log('onPlayerReady', this)
                // this.play();
                // setTimeout(() => {   //延时确保能监听到视频源错误
                //   var mediaError = this.error();
                //   console.log('ddd',mediaError)
                //   if(mediaError!=null && mediaError.code){
                //     _this.isError=true  
                //     console.log('啊哦，播放出错了。')
                //   }
                // },1000);
            }
          );   
    },
    // 商品标题
    getTitle() {
      var _this = this;
      // let openid = 'osb8W0nV7RxejQFAoV_fJM-UjLiE'
      let openid = localStorage.getItem('dlopenid')
      let room_id = this.$route.query.room_id
      $axios.get('http://app.huic.cloud/mm/view/Home/liveStream/Ajax.php?method=getLiveInfo&openid=' + openid + '&room_id=' + room_id)
      .then(function (res) {
        console.log("response", res);
        if(res.data.code === 0) {
          _this.title = res.data.data.result.title;
          _this.res_room_id = res.data.data.result.room_id;
          _this.res_dlopenid = res.data.data.result.openid;
          console.log('ohmygod.....',_this.res_gropenid,res.data.data.result.openid)
          _this.loading(res.data.data.result.room_id)
          _this.getGoodsList(res.data.data.result.room_id, res.data.data.result.openid)
        }else{
          _this.layShow = true;
        }
      })
      .catch(function (error) {
        console.log(error);
        _this.layShow = true;
      });
    },
    // 商品列表
    getGoodsList(room_id,openid) {
      let _this = this;
      // let openid = localStorage.getItem('dlopenid') 
      // let room_id = room_id
      $axios.get('http://app.huic.cloud/mm/view/Home/liveStream/Ajax.php?method=getSelectGoodsList&openid=' + openid + '&room_id=' + room_id)
      .then(function (res) {
        console.log("response", res.data.data.list);
        if(res.data.code === 0) {
          _this.goodsList = res.data.data.list
        }else{
          Toast.fail(res.data.msg);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    onPlayerPlay(player) {
      console.log('hhhhhhh',player)
      // let myPlayer = this.$refs.videoPlayer.player;
      // myPlayer.play()
    },
    buy(id) {
      let gropenid = localStorage.getItem('gropenid') 
      // alert(id,gropenid,'sssss')
      console.log(id,gropenid,this.res_gropenid,'sssss')
      window.location.href = `http://shopzg.huic.cloud/shopmm/#/detail?openid=${gropenid}&shopId=${id}`
      console.log(id)
    },
    onPlayerPlaying(e) {
      console.log('sssss',e)
      // let myPlayer = this.$refs.videoPlayer.player;
      // myPlayer.play()

    },
    onPlayerReadied() {
      console.log(222222,this.initialized, this.currentTech, this.player.techName_)
      if (!this.initialized) {
        this.initialized = true
        this.currentTech = this.player.techName_
      }
    },
    onPlayerPlay(player) {
      console.log('player111111', player)
    },
    onPlayerPause(player) {
      console.log('onPlayerPause22222', player)
    },
    onPlayerEnded(player) {
      console.log('onPlayerEnded33333333333', player)
    },
    onPlayerWaiting(player) {
      console.log('onPlayerWaiting444444444444', player)
    },
    onPlayerLoadeddata(player) {
      console.log('onPlayerLoadeddata5555555555', player)
    },
    onPlayerCanplay(player) {
      console.log('onPlayerCanplay66666666666666666', player)
    },
    onPlayerCanplaythrough(player) {
      console.log('onPlayerCanplaythrough7777777777777', player)
    },
    playerStateChanged(e) {
      console.log('playerStateChanged8888888', e)
      // if(e.waiting) {
      //   alert('等待中')
      // }
      if(e.error) {
        this.imgShow = true;
        console.log('hhhhhhhhcccccc', this.playerOptions)
      }
    },
    // record current time
    onTimeupdate(e) {
      // console.log('onTimeupdate999999', e)

      // console.log('currentTime', e.cache_.currentTime)
    },
    enterStream() {
      this.playerOptions.sources[1].src = this.streams.hls
      this.playerOptions.sources[0].src = this.streams.rtmp
      this.playerOptions.autoplay = true
    },
  }
}
</script>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/deep/ .vjs-big-play-button {
  visibility: hidden;       
}
#videobox {
  width: 100vw;
  height: 100vh;
}

/* /deep/ .vjs-custom-skin > .video-js {
    height: 100%;
}
/deep/ .van-popup--round {
  overflow: hidden;
  padding: 20px 0;
} */

.liveView {
  /* position: relative; */
  font-size: .875rem;
  /* height: 100vh; */
  /* background: #ddd; */
}
.vjs-custom-skin {
  width: 100%;
  height: 55vh;
}
.van-overlay {
  background-color: rgba(0,0,0,0);
}
.van-popup {
  /* display: block!important; */
}
.goods-self {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  width: 100%;
  overflow: hidden;
  border-radius: .3125rem;
  /* z-index: 9999; */
}
.v-title {
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.v-content {
  display: flex;
  background: #fff;
  padding: .3125rem;
  box-sizing: border-box;
  border-radius: .3125rem;

}
.v-content .left{
  
}
.v-content .left img{
  width: 5rem;
  height: 5rem;
  margin-right: .625rem;
}
.v-content .right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border: 1px solid red; */
}
.m-right {
  width:100%;
}
.conpon {
  color: #ccc;
  font-size: .75rem;
  text-decoration: line-through;
}
.price {
  position: relative;
}
.shop-car {
  position: absolute;
  right: 0;
  bottom: -0.3125rem;
  font-size: 1.5rem;
}
  /*黑色半圆是图片，上下箭头也是图片*/
.footer_btn{
  width: 3.125rem;
  height: 3.125rem;
  margin: 0 auto;
  text-align:center;
  line-height:47px;
  bottom: -0.625rem;
  background: #fff;
  border-radius: 50%;
} 
.buy {
  position: absolute;
  bottom: .75rem;
  right:  .75rem;
  /* textpx-align: right; */
}
.m-list {
  padding: .3125rem;
  border-bottom: 1px solid #ccc;
}
@keyframes bounce-down {
  25% {transform: translateY(-3px);}
  50%{transform: translateY(0);}
  75% {transform: translateY(3px);}
  100% {transform: translateY(0);}
}
.animate-bounce-down{ 
  -webkit-animation: bounce-down 1s linear infinite;
  animation: bounce-down 1s linear infinite;
}
@keyframes bounce-down1 {
  25% {transform: translateY(-3px);}
  50%, 100% {transform: translateY(0);}
  75% {transform: translateY(3px);}  
}
  .animate-bounce-down1{
    display:none;
    -webkit-animation: bounce-down 1s linear infinite;
    animation: bounce-down 1s linear infinite;
} 
</style>
